<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>设置-个人信息</title>
    <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css"/>
</head>

<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <li class="f-item">东东商城欢迎您！</li>
                        <li class="f-item">请<a href="login.html" target="_blank">登录</a>　<span><a href="register.html"
                                                                                                 target="_blank">免费注册</a></span>
                        </li>
                    </ul>
                    <ul class="fr">
                        <li class="f-item">我的订单</li>
                        <li class="f-item space"></li>
                        <li class="f-item"><a href="home.html" target="_blank">我的东东商城</a></li>
                        <li class="f-item space"></li>
                        <li class="f-item">东东商城会员</li>
                        <li class="f-item space"></li>
                        <li class="f-item">企业采购</li>
                        <li class="f-item space"></li>
                        <li class="f-item">关注东东商城</li>
                        <li class="f-item space"></li>
                        <li class="f-item" id="service">
                            <span>客户服务</span>
                            <ul class="service">
                                <li><a href="cooperation.html" target="_blank">合作招商</a></li>
                                <li><a href="shoplogin.html" target="_blank">商家后台</a></li>
                                <li><a href="cooperation.html" target="_blank">合作招商</a></li>
                                <li><a href="#">商家后台</a></li>
                            </ul>
                        </li>
                        <li class="f-item space"></li>
                        <li class="f-item">网站导航</li>
                    </ul>
                </div>
            </div>
        </div>

        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <a class="logo-bd" title="东东商城" href="JD-index.html" target="_blank"></a>
                    </div>
                    <div class="yui3-u Center searchArea">
                        <div class="search">
                            <form action="" class="sui-form form-inline">
                                <!--searchAutoComplete-->
                                <div class="input-append">
                                    <input id="autocomplete" class="input-error input-xxlarge"/>
                                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                </div>
                            </form>
                        </div>
                        <div class="hotwords">
                            <ul>
                                <li class="f-item">东东商城首发</li>
                                <li class="f-item">亿元优惠</li>
                                <li class="f-item">9.9元团购</li>
                                <li class="f-item">每满99减30</li>
                                <li class="f-item">亿元优惠</li>
                                <li class="f-item">9.9元团购</li>
                                <li class="f-item">办公用品</li>

                            </ul>
                        </div>
                    </div>
                    <div class="yui3-u Right shopArea">
                        <div class="fr shopcar">
                            <div class="show-shopcar" id="shopcar">
                                <span class="car"></span>
                                <a class="sui-btn btn-default btn-xlarge" href="cart" target="_blank">
                                    <span>我的购物车</span>
                                    <i class="shopnum">0</i>
                                </a>
                                <div class="clearfix shopcarlist" id="shopcarlist" style="display:none">
                                    <p>"啊哦，你的购物车还没有商品哦！"</p>
                                    <p>"啊哦，你的购物车还没有商品哦！"</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="yui3-g NavList">
                    <div class="yui3-u Left all-sort">
                        <h4>全部商品分类</h4>
                    </div>
                    <div class="yui3-u Center navArea">
                        <ul class="nav">
                            <li class="f-item">服装城</li>
                            <li class="f-item">美妆馆</li>
                            <li class="f-item">东东超市</li>
                            <li class="f-item">全球购</li>
                            <li class="f-item">闪购</li>
                            <li class="f-item">团购</li>
                            <li class="f-item">有趣</li>
                            <li class="f-item"><a href="seckill-index.html" target="_blank">秒杀</a></li>
                        </ul>
                    </div>
                    <div class="yui3-u Right"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="pages/userInfo/distpicker.data.js"></script>
<script type="text/javascript" src="pages/userInfo/distpicker.js"></script>
<script type="text/javascript" src="pages/userInfo/main.js"></script>
</body>
<!--header-->
<div id="account">
    <div class="py-container">
        <div class="yui3-g home">
            <!--左侧列表-->
            <div class="yui3-u-1-6 list">

                <div class="person-info">
                    <div class="person-photo"><img src="img/_/photo.png" alt=""></div>
                    <div class="person-account">
                        <span class="name">Michelle</span>
                        <span class="safe">账户安全</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="list-items">
                    <dl>
                        <dt><i>·</i> 订单中心</dt>
                        <dd ><a href="homeIndex"  class="list-active" >我的订单</a></dd>
                        <dd><a href="home_order_pay" >待付款</a></dd>
                        <dd><a href="home_order_send"  >待发货</a></dd>
                        <dd><a href="home_order_receive" >待收货</a></dd>
                        <dd><a href="home_order_evaluate" >待评价</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 我的中心</dt>
                        <dd><a href="home-person-collect.html">我的收藏</a></dd>
                        <dd><a href="home-person-footmark.html">我的足迹</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 物流消息</dt>
                    </dl>
                    <dl>
                        <dt><i>·</i> 设置</dt>
                        <dd><a href="homeSettingInfo">个人信息</a></dd>
                        <dd><a href="homeSettingAddress" class="list-active">地址管理</a></dd>
                        <dd><a href="homeSettingSafe">安全管理</a></dd>
                    </dl>
                </div>
            </div>
            <!--右侧主内容-->
            <div class="yui3-u-5-6">
                <div class="body userAddress">
                    <div class="address-title">
                        <span class="title">地址管理</span>
                        <a data-toggle="modal" data-target="#addAddress" data-keyboard="false" class="sui-btn  btn-info add-new">添加新地址</a>
                        <span class="clearfix"></span>
                    </div>
                    <div class="address-detail">
                        <table class="sui-table table-bordered">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>地址</th>
                                <th>联系电话</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            </tbody>
                        </table>
                    </div>
                    <!--新增地址弹出层-->
                    <div tabindex="-1" id="addAddress" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit"
                         style="width:580px;">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×
                                    </button>
                                    <h4 id="myModalLabel" class="modal-title">新增地址</h4>
                                </div>
                                <div class="modal-body">
                                    <form action="" class="sui-form form-horizontal" id="addFrom">
                                        <div class="control-group">
                                            <label class="control-label">收货人：</label>
                                            <div class="controls">
                                                <input  name="contact" type="text" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">所在地区：</label>
                                            <div class="controls">
                                                <div data-toggle="distpicker">
                                                    <div class="form-group area">
                                                        <select class="form-control" id="province1" name="provinceId"
                                                                onchange="getCity(this.value)">
                                                            <option value="-1">请选择</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group area">
                                                        <select class="form-control" id="city1" name="cityId"
                                                                onchange="getDistrict(this.value)">
                                                            <option value="-1">请选择</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group area">
                                                        <select class="form-control" id="district1"
                                                                name="townId"></select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">详细地址：</label>
                                            <div class="controls">
                                                <input type="text"  name="address" class="input-large">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input name="mobile"  type="text" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">是否默认：</label>
                                            <div class="controls">
                                                <select name="isDefault">
                                                    <option value="1">默认</option>
                                                    <option value="0">否</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">地址别名：</label>
                                            <div class="controls">
                                                <input type="text"  name="alias" class="input-medium">
                                            </div>
                                            <div class="othername">
                                                建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#"
                                                                                                           class="sui-btn btn-default">父母家</a>　<a
                                                    href="#" class="sui-btn btn-default">公司</a>
                                            </div>
                                        </div>

                                    </form>


                                </div>
                                <div class="modal-footer">
                                    <input value="确定" type="button" data-ok="modal"
                                           class="sui-btn btn-primary btn-large" onclick="addAddress()">
                                    <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">
                                        取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--修改地址弹出层-->
                    <div tabindex="-1" id="editAddress" role="dialog" data-hasfoot="false"  class="sui-modal hide fade edit" style="width:580px;">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×
                                    </button>

                                    <h4 id="myModalLabel1" class="modal-title">修改地址</h4>
                                </div>
                                <div class="modal-body">
                                    <form action="" class="sui-form form-horizontal" id="updateFrom">
                                        <input type="hidden" name="id" id="id">
                                        <div class="control-group">
                                            <label class="control-label">收货人：</label>
                                            <div class="controls">
                                                <input id="contact"   name="contact" type="text" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">所在地区：</label>
                                            <div class="controls">
                                                <div data-toggle="distpicker">
                                                    <div class="form-group area">
                                                        <select class="form-control" id="province" name="provinceId" onchange="getCity(this.value)">
                                                            <option id="p" value="-1">请选择</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group area">
                                                        <select class="form-control" id="city" name="cityId" onchange="getDistrict(this.value)">
                                                            <option value="-1">请选择</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group area">
                                                        <select class="form-control" id="district" name="townId" >

                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">详细地址：</label>
                                            <div class="controls">
                                                <input type="text" id="address" name="address" class="input-large">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input name="mobile" id="mobile" type="text" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">是否默认：</label>
                                            <div class="controls">
                                                <select name="isDefault" id="isDefault">
                                                    <option value="1">默认</option>
                                                    <option value="0">否</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">地址别名：</label>
                                            <div class="controls">
                                                <input type="text" id="alias" name="alias" class="input-medium">
                                            </div>
                                            <div class="othername">
                                                建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#"
                                                                                                           class="sui-btn btn-default">父母家</a>　<a
                                                    href="#" class="sui-btn btn-default">公司</a>
                                            </div>
                                        </div>

                                    </form>


                                </div>
                                <div class="modal-footer">
                                    <input value="确定" type="button" data-ok="modal"
                                           class="sui-btn btn-primary btn-large" onclick="updateAddress()">
                                    <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">
                                        取消
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
<div class="clearfix footer">
    <div class="py-container">
        <div class="footlink">
            <div class="Mod-service">
                <ul class="Mod-Service-list">
                    <li class="grid-service-item intro  intro1">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro2">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro  intro3">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro4">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro intro5">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                </ul>
            </div>
            <div class="clearfix Mod-list">
                <div class="yui3-g">
                    <div class="yui3-u-1-6">
                        <h4>购物指南</h4>
                        <ul class="unstyled">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>购物指南</li>
                        </ul>

                    </div>
                    <div class="yui3-u-1-6">
                        <h4>配送方式</h4>
                        <ul class="unstyled">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>支付方式</h4>
                        <ul class="unstyled">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>售后服务</h4>
                        <ul class="unstyled">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>特色服务</h4>
                        <ul class="unstyled">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>东东商城E卡</li>
                            <li>东东商城通信</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>帮助中心</h4>
                        <img src="img/wx_cz.jpg">
                    </div>
                </div>
            </div>
            <div class="Mod-copyright">
                <ul class="helpLink">
                    <li>关于我们<span class="space"></span></li>
                    <li>联系我们<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>商家入驻<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们</li>
                </ul>
                <p>地址：北京市昌平区沙阳路18号 邮编：100000 电话：400-0123-302</p>
                <p>京ICP备08006666号京公网安备11010888888</p>
            </div>
        </div>
    </div>
</div>
<!--页面底部END-->

<script>
    $(function () {
        getAddress();
        getProvince();
        getCity(0);
        getDistrict(0);
    })

    //拼接页面
    function getAddress() {
        $.get("/addressController/address", {}, function (data) {
            var d = data.data;
            var tbody = ''
            for (let i = 0; i < d.length; i++) {
                var tr = '<tr>' +
                    '<td>' + d[i].contact + '</td>' +
                    '<td>' + d[i].province + '  ' + d[i].city + '  ' + d[i].area + '  ' + d[i].address + '</td>' +
                    '<td>' + d[i].mobile + '</td>' +
                    '<td>' +
                    '<a data-toggle="modal" data-target="#editAddress" data-keyboard="false"  onclick="editAddress(' + d[i].id + ')">编辑</a>' +
                    '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
                    '<a onclick="deleteAddress(' + d[i].id + ')">删除</a>' +
                    '</td>' +
                    '</tr>'
                tbody += tr;
            }
            $("#tbody").html(tbody)
        })
    }

    //获取省
    function getProvince() {
        $.get("/addressController/getProvince", {id: 0}, function (data) {
            var data1 = data.data;
            var op = '<option value="-1">请选择</option>';
            for (let i = 0; i < data1.length; i++) {
                op += '<option value="' + data1[i].provinceid + '">' + data1[i].province + '</option>'
            }
            $("#province1").html(op)
            $("#province").html(op)
            $("#city1").html('<option value="-1">请选择</option>')
        })
    }

    //获取市
    function getCity(value) {
        $.get("/addressController/getCity", {id: value}, function (data) {
            var data1 = data.data;
            var op = '<option value="-1">请选择</option>';
            for (let i = 0; i < data1.length; i++) {
                op += '<option value="' + data1[i].cityid + '">' + data1[i].city + '</option>'
            }
            $("#city1").html(op)
            $("#city").html(op)
            $("#district1").html('<option value="-1">请选择</option>')
        })
    }

    //获取区
    function getDistrict(value) {
        $.get("/addressController/getDistrict", {id: value}, function (data) {
            var data1 = data.data;
            var op = '<option value="-1">请选择</option>';
            for (let i = 0; i < data1.length; i++) {
                op += '<option value="' + data1[i].areaid + '">' + data1[i].area + '</option>'
            }
            $("#district1").html(op)
            $("#district").html(op)
        })
    }

    //添加地址
    function addAddress() {
        console.log($("#addFrom").serialize())
        $.get("/addressController/addAddress", $("#addFrom").serialize(), function (data) {
            if (data.code == 10000) {
                alert(data.message)
                window.location.reload();
            } else {
                alert(data.message)
            }
        })
    }

    //删除地址信息
    function deleteAddress(id) {
        let flag = confirm("您确定要删除吗?");
        if (flag) {
            $.get("/addressController/deleteAddress", {id: id}, function (data) {
                if (data.code == 10000) {
                    alert(data.message)
                    window.location.reload();
                } else {
                    alert(data.message)
                }
            })
        }else {
            alert("删除失败")
        }
    }

    //修改地址
    function editAddress(id) {
        $.get("/addressController/editAddress", {id: id}, function (data){
            console.log(data)
            $("#contact").val(data.data.contact)
            $("#address").val(data.data.address)
            $("#mobile").val(data.data.mobile)
            $("#alias").val(data.data.alias)
            $("#id").val(data.data.id)

            //回显省
            let provinceId = data.data.provinceId;
            let province = $("#province > option");
            for (let i = 0; i < province.length; i++) {
                let item = province[i].value;
                if (provinceId == item) {
                    $("#province option[value='" + item + "']").attr(
                        "selected",
                        "selected"
                    );
                }
            }
            //回显市
            let cityId = data.data.cityId;

            let city = $("#city > option");
            for (let i = 0; i < city.length; i++) {
                let item = city[i].value;
                if (cityId == item) {
                    $("#city option[value='" + item + "']").attr(
                        "selected",
                        "selected"
                    );
                }
            }
            //回显区
            let townId = data.data.townId;

            let district = $("#district > option");
            for (let i = 0; i < district.length; i++) {
                let item = district[i].value;
                if (townId == item) {
                    $("#district option[value='" + item + "']").attr(
                        "selected",
                        "selected"
                    );
                }
            }


            //回显默认
            let optionType = data.data.isDefault;
            let allSelect = $("#isDefault > option");
            for (let i = 0; i < allSelect.length; i++) {
                let item = allSelect[i].value;
                if (optionType == item) {
                    $("#isDefault option[value='" + item + "']").attr(
                        "selected",
                        "selected"
                    );
                }
            }
            })
    }

    //修改地址
    function updateAddress() {
        $.get("/addressController/updateAddress", $("#updateFrom").serialize(), function (data) {
            if (data.code == 10000) {
                alert(data.message)
                window.location.reload();
            } else {
                alert(data.message)
            }
        })
    }


</script>

</html>